"use client"

import { LEVELS } from "../config/levels"

interface MainMenuProps {
  completedLevels: string[]
  onLevelSelect: (levelId: string) => void
}

export function MainMenu({ completedLevels, onLevelSelect }: MainMenuProps) {
  const levelOrder = ["guard", "minister", "king"]

  const isLevelUnlocked = (levelId: string, index: number) => {
    if (index === 0) return true // First level is always unlocked
    return completedLevels.includes(levelOrder[index - 1])
  }

  const handleLevelClick = (levelId: string, index: number) => {
    if (isLevelUnlocked(levelId, index)) {
      onLevelSelect(levelId)
    } else {
      alert("请先完成前序试炼")
    }
  }

  return (
    <div className="min-h-screen relative overflow-hidden">
      {/* Background */}
      <div
        className="absolute inset-0 bg-cover bg-center"
        style={{
          backgroundImage: "linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%)",
        }}
      />

      {/* Overlay */}
      <div className="absolute inset-0 bg-black/50" />

      {/* Content */}
      <div className="relative z-10 flex flex-col items-center justify-center min-h-screen p-6">
        {/* Story Text */}
        <div className="w-full max-w-2xl mb-12">
          <div className="bg-black/30 backdrop-blur-sm rounded-2xl p-6 border border-white/20">
            <p className="text-white text-lg leading-relaxed text-center">
              年轻的冒险者啊，你将在三个黎明内完成三项试炼：
              <br />
              第一道城门需诚实，第二重宫闱看智谋，最终王座见真心
            </p>
          </div>
        </div>

        {/* Level Selection */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 w-full max-w-4xl">
          {levelOrder.map((levelId, index) => {
            const level = LEVELS[levelId]
            const unlocked = isLevelUnlocked(levelId, index)
            const completed = completedLevels.includes(levelId)

            return (
              <div key={levelId} className="flex flex-col items-center">
                <button
                  onClick={() => handleLevelClick(levelId, index)}
                  className={`relative w-48 h-48 rounded-2xl overflow-hidden border-3 transition-all duration-300 ${
                    unlocked
                      ? "hover:scale-105 hover:shadow-2xl border-white/50"
                      : "opacity-50 cursor-not-allowed border-gray-500"
                  } ${completed ? "ring-4 ring-green-400" : ""}`}
                  disabled={!unlocked}
                >
                  <img
                    src={level.image || "/placeholder.svg"}
                    alt={level.name}
                    className="w-full h-full object-cover"
                  />
                  <div className="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent" />
                  <div className="absolute bottom-4 left-4 right-4">
                    <h3 className="text-white font-bold text-lg">{level.name}</h3>
                    {completed && <div className="text-green-400 text-sm mt-1">✓ 已完成</div>}
                  </div>
                </button>
                <p className="text-gray-300 text-sm mt-3 text-center">{level.name}</p>
              </div>
            )
          })}
        </div>
      </div>
    </div>
  )
}
